/**      .----.
 *       _.'__    `.
 *   .--($)($$)---/#\
 * .' @          /###\
 * :         ,   #####
 *  `-..__.-' _.-\###/
 *        `;_:    `"'
 *      .'"""""`.
 *     /,     ,\\
 *    //  !BUG  \\
 *    `-._______.-'
 *    ___`. | .'___
 *   (______|______)
 *
 * 邮件自动补全-JS
 * @author kwun
 * @email 527565073@qq.com
 */
 +(function($){
    var pluginName = 'autoMail',
        _default = {
            value   : '',
            list    : '',
            index   : -1,
            textCls : 'text-gray', 
            listCls : 'list-mail',
            mailArr : ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"]
        }

    var autoMail = function(elem,options){
        this.elem    = elem; //Dom对象
        this.$elem   = $(this.elem) //Jquery对象

        _default.width = $(this.elem).outerWidth();
        _default.height = $(this.elem).outerHeight();
        _default.left = $(this.elem).offset().left;
        _default.top = $(this.elem).offset().top;

        this.options = $.extend({}, _default, options || "");

        this.init();
        
     }

     autoMail.prototype = {
        init:function(){
            var _this = this;

            this.$elem.bind('click',{myOptions:this.options},function(event){
                var $options = event.data.myOptions;
                _this.$elem.select();
                if(_this.$elem.val() != ''){
                    if(_this.$elem.val().indexOf('@') >= 0){
                        _this.add();
                        _this.order($options.value);
                    }
                }
            })

            this.$elem.keyup({myOptions:this.options},function(event) {
                var $options = event.data.myOptions;
                var keyCode = event.keyCode
                switch(keyCode){ 
                    case 13: 
                        _this.remove(); 
                        _this.$elem.blur(); 
                        break; 
                    case 38: 
                        $options.index--; 
                        if($options.index < 0){ 
                            $options.index = 0; 
                        } 
                        _this.keyOperate($options.index); 
                        break; 
                    case 40: 
                        $options.index++; 
                        if($options.index > $('.item',$options.list).length - 1){ 
                            $options.index = ('.item',$options.list).length - 1 
                        } 
                        _this.keyOperate($options.index); 
                        break; 
                    default:
                        if(_this.$elem.val().indexOf('@') >= 0){                          
                            $options.value = _this.$elem.val(); 
                            _this.order($options.value);
                            _this.add();      
                        }else{
                            _this.remove();
                        }     
                }  
            });
        },
        create:function(){
            console.log(this.$elem.val());
            var _this = this;
            var li = ''; 
            for(var i = 0; i < this.options.mailArr.length; i++){ 
                li += '<li class="item">'+ '<span class="style">' + this.options.mailArr[i] + '</span>' + '</li>'; 
            } 
            this.options.list = $('<div class="'+ this.options.listCls +'"><ul>'+ li +'</ul></div>'); 
            this.options.list.css({ 
                'position' : 'absolute', 
                'left'     : this.options.left, 
                'top'      : this.options.top + this.options.height + 1, 
                'min-width': this.options.width 
            }) 
            this.options.list.appendTo($('body')); 

            //邮箱列表绑定事件 
            this.options.list.find('.item').click(function(event){ 
                _this.getVal($(this)); 
                _this.remove(); 
                event.stopPropagation(); 
            }) 
            this.options.list.find('.item').hover( 
                function(){ $(this).addClass('hover'); }, 
                function(){ $(this).removeClass('hover'); } 
            ) 
            return this.options.list;
        },
        order:function(_value){
            $('.name',this.options.list).remove(); 
            var name = $('<span class="name">'+ this.options.value +'</span>'); 
            $('.item',this.options.list).prepend(name); 
        },
        add:function(){
            if(typeof this.options.list == 'undefined' || this.options.list.length < 1) this.create(); 
        },
        remove:function(){
            if($(this.options.list).length > 0){ 
                this.options.list.remove(); 
                delete this.options.list; 
            } 
        },
        getVal:function(obj){
            if($('.name',obj).text() != ''){ 
                var selectValue = obj.text(); 
                this.$elem.val(selectValue);   
            }else{ 
                return false; 
            } 
        },
        keyOperate:function(){
            $('.item',this.options.list).eq(this.options.index).addClass('hover').siblings('.item').removeClass('hover'); 
            this.$elem.val($('.item',this.options.list).eq(this.options.index).text()); 
        }
     }

    $.fn[pluginName] = function(options){
        return this.each(function(){
            new autoMail(this,options)
        })
    }



 })(jQuery)